<script setup>

</script>

<template>
  <div class="footer-container bg-white py-5 text-sm text-gray-500 shadow-none">
    <div class="footer-content flex justify-center">
      <p class="footer-item">Copyright © 2024 菱乱成风. All Rights Reserved.</p>
      <p class="footer-item mx-2">
        <a href="https://beian.miit.gov.cn" target="_blank">陕ICP备2024040722号</a>
      </p>
      <div class="footer-item flex items-center mx-2">
        <img src="../assets/备案图标.png" alt="备案图标" class="备案图标">
        <a href="https://beian.mps.gov.cn/#/query/webSearch?code=61019002002951" target="_blank" class="ml-2">陕公网安备61019002002951</a>
      </div>
    </div>
  </div>
</template>


<style scoped>
.footer-container {
  /* 根据需要添加其他样式，如宽度、位置等 */
  width: 100%; /* 如果需要的话，设置容器的宽度 */
}

.footer-content {
  /* 使用Flexbox的row方向来水平排列内容，并居中对齐 */
  display: flex;
  justify-content: center;
}

.footer-item {
  /* 根据需要设置左右外边距来调整间距 */
  margin-left: 0.5rem; /* 左侧外边距 */
  margin-right: 0.5rem; /* 右侧外边距 */
}

.备案图标 {
  height: 20px;
  width: 20px;
  vertical-align: middle; /* 图片与文本垂直对齐 */
}

.ml-2 {
  margin-left: 0.5rem; /* 图标和文本之间的间距 */
}

/* 如果需要，可以移除或调整mx-2的margin值 */
.mx-2 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
</style>